<template>
	<view class="filterWrapper">
		<view class="cu-form-group">
			<view class="title">所属类型:</view>
			<picker @change="optionsPickerChange1" :value="optionIndex1" :range="optionsPicker1">
				<view class="picker">
					{{optionIndex1>-1?optionsPicker1[optionIndex1]:'点击选择'}}
				</view>
			</picker>
			<button class="cu-btn stop text-white" @tap="clearFilter(0)">清空</button>
		</view>
		<!-- <view class="filterItem">
			<text>
				员工编号
			</text>
			<input type="text"  v-model="OperatorCode" placeholder="点击输入员工编号"/>
			<button class="cu-btn stop text-white" @tap="clearFilter(0)">清空</button>
		</view> -->
		<view class="filterItem">
			<text>
				所属业务:
			</text>
			<input type="text"  data-target="OptionModal" :value="SelectOptionsObj.OperatorName" 
			disabled
			placeholder="点击选择所属业务" @tap="showModal" />
			<button class="cu-btn stop text-white" @tap="clearFilter(1)">清空</button>
			<!-- <view class="title">所属业务:</view>
			<view class="inpt1"><input type="text" placeholder="点击获取" :value="SelectOptionsObj.OperatorName" disabled="true"
				 data-target="OptionModal" @tap="showModal" />
			</view> -->
		</view>
		<view class="filterItem">
			<text>
				编号:
			</text>
			<input type="text"  v-model="ClientCode" placeholder="点击输入编号"/>
			<button class="cu-btn stop text-white" @tap="clearFilter(2)">清空</button>
		</view>
		<!-- <view class="filterItem">
			<text>
				编号
			</text>
			<input type="text" placeholder="编号" v-model="ClientCode" />
		</view> -->
		<view class="filterItem">
			<text>
				名称:
			</text>
			<input type="text"  v-model="ClientName" placeholder="点击输入名称"/>
			<button class="cu-btn stop text-white" @tap="clearFilter(3)">清空</button>
			<!-- <text>
				名称
			</text>
			<input type="text" placeholder="名称" v-model="ClientName" /> -->
		</view>
		<view class="filterItem">
			<text>
				电话:
			</text>
			<input type="text"  v-model="Phone" placeholder="点击输入电话"/>
			<button class="cu-btn stop text-white" @tap="clearFilter(4)">清空</button>
			<!-- <text>
				电话
			</text>
			<input type="text" placeholder="电话" v-model="Phone" /> -->
		</view>
		<view class="cu-modal" :class="modalName=='OptionModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">选择业务员</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="searchStore">
						<input placeholder="请输入业务员名称" v-model="SearchOptionName" @input="filterOption" />
						<button @tap="searchOption">搜索</button>
					</view>
					<view class="StoreListWrap">
						<view v-for="(item,index) in TempOptionList" :key="item.OperatorID" @tap="selectOptions(index)">{{item.OperatorName}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as Apis from '@/syApis/syBb/apis.js'
	export default {
		data() {
			return {
				startAndEndTime: 0,
				ClientName: "",
				endTime: 0,
				dateName: "",
				StoreID: "",
				GoodsName: "",
				list: [],
				storeList: [],
				optionsPicker1:['客户','供应商','全部'],
				optionIndex1:-1,
				optionsPicker:[],
				optionIndex:-1,
				OptionList:[],
				ClientCode:"",
				Phone:"",
				//业务员临时数组
				TempOptionList:[],
				//当前选择的业务员条目
				SelectOptionsObj: {
					OperatorName: "",
					OperatorID: ""
				},
				OperatorList:[],
				modalName:null,
				SearchOptionName:""
			};
		},
		created() {
			this.GetOperatorMessage();
		},
		methods: {
			clearFilter(type){
				if(type==0){
					this.optionIndex1 = -1;
				}else if(type==1){
					this.SelectOptionsObj.OperatorName = "";
					this.SelectOptionsObj.OperatorID = "";
					// this.SelectOptionsObj.OperatorName = "";
				}else if(type==2){
					this.ClientCode = "";
				}else if(type==3){
					this.ClientName = "";
				}else{
					this.Phone = "";
				}
			},
			filterOption(e){
				let value = e.detail.value;
				this.TempOptionList = [];
				var that = this;
				this.OperatorList.forEach((item,index)=>{
					if(item.OperatorName.indexOf(value)>-1){
						that.TempOptionList.push(item);
					}
				});
				// this.PriceIndex = 0;
				
			},
			//显示弹框
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal() {
				this.modalName = null;
			},
			//选择业务员
			selectOptions(index) {
				this.SelectOptionsObj = this.OperatorList[index];
				this.modalName = null;
			},
			//搜索业务员
			searchOption() {
				if (this.searchOption != '') {
					let Filter = "OperatorName like '%" + this.SearchOptionName + "%'";
					this.GetOperatorMessage(Filter);
				} else {
					this.GetOperatorMessage();
				}
			},
			onNavigationBarButtonTap(e) {
				const index = e.index;
				console.log(index);
				if (index == 0) {
					this.changeDate();
				}
			},
			//获取业务员列表
			GetOperatorMessage(Filter="") {
				let data = {
					Filter:Filter
				}
				this.optionsPicker = [];
				var that = this;
				Apis.GetOperatorMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {
							Api.showTip("登录超时");
						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg);
						} else {
							let responseData = res.data.ResultMsg;
							if(Filter==""){
								that.TempOptionList = responseData;
								that.OperatorList = responseData;
							}else{
								that.TempOptionList = responseData;
							}
						}
					} else {
			
					}
				});
			},
			optionsPickerChange1(e){
				if(e.detail.value==-1){
					this.optionIndex1 = 0;
				}else{
					this.optionIndex1 = e.detail.value;
				}
			},
			optionsPickerChange(e){
				if(e.detail.value==-1){
					this.optionIndex = 0;
				}else{
					this.optionIndex = e.detail.value;
				}
			},
			custormInput() {
				console.log(this);
			},
			//修改数据
			changeDate() {
				var pages = getCurrentPages(),
					prevPage = null;
				if (pages.length > 1) {
					prevPage = pages[pages.length - 2];
				}
				var that = this;
				var filter = "";
				if(this.ClientCode!=""){
					filter+="ClientCode like '%"+this.ClientCode+"%'";
				}
				if(this.ClientName!=""){
					if(filter!=""){
						filter+=" and ClientName like '%"+this.ClientName+"%'";
					}else{
						filter="ClientName like '%"+this.ClientName+"%'";
					}
				}
				if(this.Phone!=""){
					if(filter!=""){
						filter+=" and Phone like '%"+this.Phone+"%'";
					}else{
						filter="Phone like '%"+this.Phone+"%'";
					}
				}
				if(this.optionIndex1!="-1"){
					if(filter!=""){
						filter+=" and IsClient='"+this.optionIndex1+"'";
					}else{
						filter="IsClient='"+this.optionIndex1+"'";
					}
				}
				
				if(this.SelectOptionsObj.OperatorID!=""){
					if(filter!=""){
						filter+=" and EmpID ='"+this.SelectOptionsObj.OperatorID+"'";
					}else{
						filter="EmpID='"+this.SelectOptionsObj.OperatorID+"'";
					}
				}
				let data = {
					ClientCode:this.ClientCode,
					ClientName:this.ClientName,
					Phone:this.Phone,
					SelectAll:1,
					Filter:filter
				};
				this.$eventHub.$emit('fire',data);
				uni.navigateBack({
					delta: 1
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			changeShow(name, type) {
				this.startAndEndTime = type;
				this.$refs[name].show();
				this.dateName = name;
			},
			
			confirm(res) {
				if (this.startAndEndTime == 0) {
					this.startTime = res.data;
				} else {
					this.endTime = res.data;
				}
				this.$refs[this.dateName].hide();
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/static/bbCss/bbFilter.scss';
	
	.cu-form-group{
		height: 100upx;
		line-height: 100upx;
		background: #FFF;
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
		padding-left: 30upx;
		padding-right: 30upx;
		font-size: 28upx;
		background: #FFF;
		.title{
			flex: 1;
		}
		picker{
			flex: 2;
			text-align:left;
		}
		.picker{
			text-align: left;
		}
		button{
			width: auto;
			padding-left: 10px;
			padding-right: 10px;
			height: 60upx;
			line-height: 60upx;
			// margin-top: 20upx;
			font-size: 22upx;
			background: #7caad8;
			color:#FFF;
		}
	}
   // button::after {
   // 	border: none;
   // 	padding: 0px;
   // }
   
   // page {
   // 	width: 100%;
   // 	height: 100%;
   // 	background: #ebebeb;
   // }
   
   // .filterWrapper {
   // 	background: #FFF;
   // 	padding-bottom: 15upx;
   // }
   
   // .title-padding {
   // 	height: var(--status-bar-height);
   // 	background: $bb-bg-color;
   // 	box-sizing: content-box;
   // }
   
   // .filterHeader {
   // 	width: 100%;
   // 	height: 50px;
   // 	line-height: 50px;
   // 	position: relative;
   // 	text-align: center;
   // 	background: $bb-bg-color;
   // 	color: #FFF;
   // 	font-size: 18px;
   // 	background-size: 100%;
   
   // 	.pd {
   // 		display: inline-block;
   // 		position: absolute;
   // 		margin-left: 10px;
   // 		top: 30upx;
   // 		left: 0px;
   // 		font-size: 14px;
   // 		width: 40upx;
   // 		height: 40upx;
   // 		background: url(../../static/back.png) no-repeat;
   // 		background-size: 100%;
   // 	}
   
   // 	.options {
   // 		position: absolute;
   // 		right: 0px;
   // 		top: 10px;
   // 		width: 80px;
   // 		display: flex;
   // 		text-align: right;
   
   // 		.setting {
   // 			width: 30px;
   // 			height: 30px;
   // 			background: url(../../static/sureFilter.png) no-repeat;
   // 			background-size: 30px;
   // 			border: none;
   // 			margin-left: 90upx;
   
   // 		}
   // 	}
   
   // }
   
   // .filterItem {
   // 	height: 120upx;
   // 	line-height: 120upx;
   // 	background: #FFF;
   // 	display: flex;
   // 	flex-direction: row;
   // 	box-sizing: border-box;
   // 	padding-left: 30upx;
   // 	padding-right: 30upx;
   // 	font-size: 32upx;
   // 	background: #FFF;
   
   // 	text {
   // 		flex: 1;
   
   // 		&:last-child {
   // 			text-align: right;
   // 		}
   // 	}
   
   // 	input {
   // 		flex: 1;
   // 		height: 60upx;
   // 		line-height: 60upx;
   // 		margin-top: 50upx;
   // 		border-bottom: 1px solid #ebebeb;
   // 	}
   
   // 	view.selectInput {
   // 		flex: 1;
   // 		height: 60upx;
   // 		line-height: 60upx;
   // 		margin-top: 22upx;
   // 		border-bottom: 1px solid #ebebeb;
   
   // 		input {
   // 			flex: 1;
   // 			height: 40upx;
   // 			line-height: 40upx;
   // 			margin-top: 50upx;
   // 			border-bottom: 1px solid #ebebeb;
   // 		}
   // 	}
   // }
   // .padding-xl .searchStore {
   // 	display: flex;
   // 	width: 100%;
   // 	margin: auto;
   // 	height: 45px;
   // 	padding-top: 5px;
   // 	font-size: 14px;
   // }
   
   // .padding-xl .searchStore input {
   // 	flex: 1;
   // 	height: 35px;
   // 	border: 1px solid #CCC;
   // 	border-top-left-radius: 5px;
   // 	border-bottom-left-radius: 5px;
   // 	padding-left: 10px;
   // }
   
   // .padding-xl {
   // 	padding: 10px;
   
   // }
   
   // .padding-xl .searchStore button {
   // 	font-size: 14px;
   // 	color: #FFF;
   // 	padding-left: 8px;
   // 	padding-right: 8px;
   // 	height: 35px;
   // 	line-height: 35px;
   // 	border-radius: 0px;
   // 	border-top-right-radius: 5px;
   // 	border-bottom-right-radius: 5px;
   // 	text-align: center;
   // 	background: rgba(124, 170, 216, 1);
   // }
   
   // .padding-xl .StoreListWrap {
   // 	height: 250px;
   // 	overflow: auto;
   // }
   
   // .padding-xl .StoreListWrap view {
   // 	height: 40px;
   // 	line-height: 40px;
   // 	text-align: left;
   // 	border-bottom: 1px solid #CCC;
   // 	padding-left: 8px;
   // }
   // .padding-xl .GoodsListWrap{
   // 	height: 250px;
   // 	overflow: auto;
   // }
   // .padding-xl .GoodsListWrap view{
   // 	height: 40px;
   // 	padding:3px;
   // 	display: flex;
   // 	align-items: center;
   // 	justify-content: center;
   // 	margin-top: 5px;
   // }
   // .padding-xl .GoodsListWrap view image{
   // 	width: 40px;
   // 	height: 40px;
   // }
   // .padding-xl .GoodsListWrap view text{
   // 	flex: 1;
   // 	height: 40px;
   // 	text-align: left;
   // 	padding-left: 10px;
   // 	box-sizing: border-box;
   // 	text-overflow: ellipsis;
   // 	overflow: hidden;
   // 	white-space: nowrap;
   // }
   // .inpt1{
   // 	flex: 1;
   // 	text-align: right;
   // }
</style>
